<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-07 10:05:05
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 10:00:48
 * @Description: 文章列表
-->
<template>
  <div class="page">
    <SearchForm :formItems="searchFields" @search="fetchData" />
    <el-card class="table-card">
      <div class="action-box">
        <add-button @click="handleEdit"></add-button>
      </div>
      <ProTable
        :data="dataList"
        :columns="columns"
        :border="false"
        showIndex
        :pagination="pagination"
        @selection-change="(selection: IArticleItem[]) => console.log('Selected rows:', selection)"
        @row-click="(row: IArticleItem) => console.log('Row clicked:', row)"
        @pagination-change="handlePaginationChange"
      >
        <template #index="{ $index }">{{ $index + 1 }}-{{ $index }}</template>
        <template #edit="{ row }">
          <edit-button size="small" @click="handleEdit(row)"></edit-button>
          <del-button size="small" @click="handleDelete(row.id)"></del-button>
        </template>
      </ProTable>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import ProTable from '@/components/ProTable/index.vue'
  import SearchForm from '@/components/ProForm/SearchForm.vue'
  import { deleteArticle, fetchArticleList } from '@/services/apis/article'
  import { columns, searchFields } from './config'
  import { useTableData, useDeleteConfirm } from '@/hooks'
  import type { IArticleItem } from './type'
  // 列表数据
  const { dataList, pagination, fetchData, handlePaginationChange } =
    useTableData<IArticleItem>(fetchArticleList)
  // 删除确认 弹窗
  const { handleDelete } = useDeleteConfirm(deleteArticle, fetchData)

  const router = useRouter()
  // 编辑
  const handleEdit = (row?: IArticleItem): void => {
    router.push({ path: `/content/edit`, query: { id: row?.id } })
  }
  onMounted(() => {
    fetchData()
  })
</script>
<style lang="scss" scoped></style>
